import React, { FC, useState, memo, useCallback } from 'react';
import {
  Modal,
  WingBlank,
  WhiteSpace,
  Button,
  TextareaItem,
  Toast,
} from 'antd-mobile';
import { useDispatch } from 'react-redux';
import { useLocation, Location } from 'umi';
import { loadAddComment } from '@/stores/reducer/house';

const Banner: FC = () => {
  const { query }: Location = useLocation();
  const dispatch = useDispatch();
  const [show, setShow] = useState(false);
  const [commentValue, setCommentValue] = useState<string | undefined>();

  const handleClick = useCallback(() => {
    setShow(true);
  }, []);
  const handleModalClose = useCallback(() => {
    setShow(false);
  }, []);

  const handleCommentChange = useCallback((val: string | undefined) => {
    setCommentValue(val);
  }, []);

  const handleComment = useCallback(() => {
    if (commentValue && commentValue.trim()) {
      dispatch(
        loadAddComment({
          comment: commentValue.trim(),
          houseId: query?.id,
        }),
      );
      handleModalClose();
    } else {
      Toast.fail('评论内容不能为空');
    }
  }, [commentValue]);

  return (
    <div className="footer">
      <WingBlank size="md">
        <WhiteSpace />
        <div className="footer-btn" onClick={handleClick}>
          评论~
        </div>
        <WhiteSpace />
      </WingBlank>
      <Modal
        visible={show}
        popup
        animationType="slide-up"
        onClose={handleModalClose}
      >
        <WingBlank size="md">
          <div className="modal-comment">
            <TextareaItem
              rows={5}
              count={200}
              placeholder="评论内容..."
              onChange={handleCommentChange}
            />
          </div>
          <WhiteSpace />
          <Button type="warning" onClick={handleComment}>
            评论
          </Button>
          <WhiteSpace />
        </WingBlank>
      </Modal>
    </div>
  );
};

export default memo(Banner);
